<script setup>
import {Delete} from "@element-plus/icons-vue";
import useWebsiteStore from "@/store/websiteStore";
import {onMounted} from "vue";

const websiteStore = useWebsiteStore();

onMounted(() => {
    websiteStore.getWebsiteList();
})

const onOpen = (item) => {
  window.urlApi.openWidow(item.url)
}

</script>

<template>
    <el-row v-if="websiteStore.queryWebsite(websiteStore.keywords).length > 0" :gutter="20" class="item"
            v-for="(item,index) in websiteStore.queryWebsite(websiteStore.keywords)" :key="index">
        <el-col :span="7">
            <el-image style="width: 100%;" :src="item.poster" :preview-src-list="[item.poster]"/>
        </el-col>
        <el-col :span="17" @click="onOpen(item)">
            <div>
                {{ item.title }}
            </div>
            <el-row :justify="'end'">
                <el-col :span="1">
                    <el-button :icon="Delete" circle @click.stop="websiteStore.deleteWebsite(item)"></el-button>
                </el-col>
            </el-row>
        </el-col>
    </el-row>

    <el-empty v-else description="暂无数据">

    </el-empty>
</template>


<style scoped lang="scss">
.item {
    padding: 10px 20px;
    cursor: pointer;
    border-bottom: 1px solid #eee;
}

.item:hover {
    background: #eee;
}
</style>
